<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@include file="/WEB-INF/base.jspf"%>
<!DOCTYPE html>
<html>
<head>
<title>入款银行管理</title>
<style>
	.modal-dialog {
		max-width: 1000px;
	}
	.div-c-controlBtns {
		display:flex;
		justify-content:flex-end;
		margin-bottom:16px;
	}
	.div-c-controlBtns button + button {
		margin-left:8px;
	}
	.p-c-flexwrapper {
		display:flex;
		align-items:center;
		margin-right:16px;
		margin-bottom:16px;
	}
	.p-c-flexwrapper > span {
		width:80px;
	}
	.p-c-flexwrapper > .form-control {
		width:180px;
	}
	#addAndEditModal .modal-body {
		display:flex;
		flex-wrap:wrap;
	}
	table th,table tr,table td {
	text-align: center;
	vertical-align:middle;
}
</style>
</head>
<body>
	<div class="div-c-controlBtns">
		<button class="btn btn-primary" id="button-i-addNewZongDaiLi">新增</button>
	</div>
<table id="table-i-zongdailiList" class="table table-striped table-bordered table-hover">
		<thead>
			<tr>
				<th style="display:none;"></th>
				<th>收款银行</th>
				<th>收款账号</th>
				<th>收款人</th>
				<th>收款支行</th>
				<th>创建时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody> </tbody>
	</table>		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		            </div>
		            <form>
		            <div class="modal-body">
		            	<input id="input-i-id" hidden="hidden" class="input-auto" />
		            	<p class="p-c-flexwrapper"><span>收款银行：</span>
		            	<select id="input-i-bankName" required class="input-auto form-control">
							<option value="中国工商银行">中国工商银行</option>
							<option value="中国建设银行">中国建设银行</option>
							<option value="中国银行">中国银行</option>
							<option value="中国农业银行">中国农业银行</option>
							<option value="交通银行">交通银行</option>
							<option value="招商银行">招商银行</option>
							<option value="中信银行">中信银行</option>
							<option value="中国民生银行">中国民生银行</option>
							<option value="兴业银行">兴业银行</option>
							<option value="上海浦东发展银行">上海浦东发展银行</option>
							<option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
							<option value="中国光大银行">中国光大银行</option>
							<option value="平安银行">平安银行</option>
							<option value="华夏银行">华夏银行</option>
							<option value="北京银行">北京银行</option>
							<option value="广发银行">广发银行</option>
							<option value="上海银行">上海银行</option>
							<option value="江苏银行">江苏银行</option>
							<option value="恒丰银行">恒丰银行</option>
							<option value="浙商银行">浙商银行</option>
							<option value="南京银行">南京银行</option>
							<option value="宁波银行">宁波银行</option>
							<option value="渤海银行">渤海银行</option>
							<option value="杭州银行">杭州银行</option>
							<option value="东亚银行">东亚银行</option>
							<option value="深圳发展银行">深圳发展银行</option>
							<option value="厦门银行">厦门银行</option>
							<option value="广州农商银行">广州农商银行</option>
							<option value="广东农信">广东农信</option>
							<option value="广西农村信用社">广西农村信用社</option>
							<option value="福建农村信用社">福建农村信用社</option>
							<option value="贵州农村信用社">贵州农村信用社</option>
							<option value="桂林银行">桂林银行</option>
							<option value="东莞农村商业银行">东莞农村商业银行</option>
							<option value="深圳农商银行">深圳农商银行</option>
							<option value="佛山顺德农村商业银行">佛山顺德农村</option>
							<option value="贵阳银行">贵阳银行</option>
							<option value="柳州银行">柳州银行</option>
							<option value="浙江农村信用社">浙江农村信用社</option>
							<option value="东莞银行">东莞银行</option>				            		
		            	</select></p>
		            	<p class="p-c-flexwrapper"><span>收款账号：</span><input id="input-i-bankAcount" required class="input-auto form-control" /></p>
		            	<p class="p-c-flexwrapper"><span>收款人：</span><input id="input-i-acountName" required class="input-auto form-control" /></p>
		            	<p class="p-c-flexwrapper"><span>收款支行：</span><input id="input-i-acountBranch" required class="input-auto form-control" /></p>
		            </div>
		            </form>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitZongDaiLi">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   	

<!-- 模态框（Modal） -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">你确定要删除该银行吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btn-i-delModalBtn">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
		
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script>
	$("#table-i-zongdailiList").DataTable({
      // "bPaginate": true,
      "bLengthChange": true,      
      "bSort": false,
      // "bInfo": true,
      "bAutoWidth": false,
//	         "bServerSide":true,
      'aLengthMenu':[10, 20],
       "searching": false,
       "dom": `ftp`,
//	    "searching": true,l
       "language": {//语言设置  
            "lengthMenu": "每页显示 _MENU_ 条记录",     
            "zeroRecords": "没有检索到数据",     
            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
            "info": "没有数据",     
            "oPaginate": {     
                "sFirst": "首页",     
                "sPrevious": "前一页",     
                "sNext": "后一页",     
                "sLast": "尾页"    
          	},
            "search":"搜索:",
            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
            "infoEmpty":      "没有找到匹配的信息",
         },
         "ajax": {
        	 "type": "POST",
        	 "url": "/admin/findBankOfdeposit.do",
         },
         "columns": [
					 {"data": "id", "className": "hidden-td id-edit-td"},
                     {"data": "bankName", "className": "bankName-edit-td"},
                     {"data": "bankAcount", "className": "bankAcount-edit-td"},
                     {"data": "acountName", "className": "acountName-edit-td"},
                     {"data": "acountBranch", "className": "acountBranch-edit-td"},
                     {"data": "createTime", "className": "createTime-edit-td"},
                     {"data": null, "defaultContent": "<button class='btn btn-warning btn-c-editBankInfo btn-sm'>修改</button> <button class='btn btn-danger btn-c-delBankInfo btn-sm'>删除</button>"},
                 ]        
   		 })		
		$("#button-i-addNewZongDaiLi").on("click", function(event) {
			$("#addAndEditModal").attr("data-type", "add")
			$("#addAndEditModal").modal("show")
		})
		$("#table-i-zongdailiList").on("click", ".btn-c-editBankInfo", function(event) {
			$("#addAndEditModal").attr("data-type", "edit")
			var $parentTr = $(event.target).closest("tr")
			$("#addAndEditModal .input-auto").each(function(index, element) {
				$(element).val($parentTr.find("." + element.id.split("-")[2] + "-edit-td").text())
			})
			$("#addAndEditModal").modal("show")
		})
/* 		$("#table-i-zongdailiList").on("click", ".btn-control-startOrBan", function(event) {
		}) */
		$('#addAndEditModal').on('hidden.bs.modal', function () {
			if ($("#addAndEditModal").attr("data-type") == "edit") {
				$("#addAndEditModal form")[0].reset()
			}
		})
		var obj = {
			btnName: "#button-i-submitZongDaiLi",
			divName: "#addAndEditModal",
			isRegArray: [
	             {inputValue: function() {
	            	 return $("#input-i-bankAcount").val()
	             }, regValue:/^\d{16}|\d{19}$/, noticeText:"无效的银行卡账号"},			             
            ],
		}
		
		var ajaxObj = {
			"add": "/admin/addBankOfdeposit.do",	
			"edit":"/admin/updateBankOfdeposit.do",
		}
		bindDelItemEvent("#table-i-zongdailiList", ".btn-c-delBankInfo", "/admin/deleteBankOfdeposit.do")
		checkFormMethod(obj, function() {
			var newRequest = {
				type: "post",
				data: {
					acountBranch: $("#input-i-acountBranch").val(),
					acountName: $("#input-i-acountName").val(),
					bankAcount: $("#input-i-bankAcount").val(),
					bankName: $("#input-i-bankName").val(),
				},
				success: function(data) {
					var newData = JSON.parse(data)
					showNoticeModal("操作成功！")
					$('#addAndEditModal').modal("hide")
					$("#addAndEditModal form")[0].reset()
					var table = $("#table-i-zongdailiList").DataTable()
					table.ajax.reload()
				},
				error: function(status) {
				}
			}
			var type = $("#addAndEditModal").attr("data-type")
			if (type == "edit") {
				newRequest.data.id = $("#input-i-id").val()
			}
			newRequest.url = ajaxObj[type]
			ajax(newRequest)
		})			
		
	</script>
</body>
</html>